<template>
    <div class="content contentone">
        <p>产品列表</p>
        <a-input-search placeholder="关键字查询" style="width: 200px" @search="onSearch"/>
        <a-button>刷新</a-button>
        <a-button type="primary" @click="createDevice" v-show="data.length==0? false: true">创建产品</a-button>
        <a-divider orientation="left">设备列表</a-divider>
        <a-table :columns="columns" :dataSource="data" :style="{width:'840px'}" rowKey="key" v-show="data.length==0? false: true">
            <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
            <span slot="customTitle">产品名称</span>
            <span slot="tags" slot-scope="tags">
                <a-tag  color="blue" >{{tags}}</a-tag>
              </span>
            <template slot="operation" slot-scope="text,record">
                <a href="javascript:;"  @click="showDrawer(record.key)" >查看</a>
                <a-divider type="vertical" />
                <a-popconfirm  v-if="data.length" title="确认删除该设备!"
                               okText="确定" cancelText="取消" tabindex="i" @confirm="() => onDelete(record.clientid)">
                    <a-icon slot="action" type="question-circle-o" style="color: red" />
                    <a href="javascript:;">删除</a>
                </a-popconfirm></template>
        </a-table>
        <!--- 数据空显示创建新设备--->
        <div style="min-height: 320px">
            <a-empty v-show="data.length==0? true: false" style="margin-top: 100px"
                     image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original">
                <span slot="description"> 暂无数据 </span>
                <a-button type="primary"  @click="createDevice"> 马上创建</a-button>
            </a-empty>
        </div>
        <a-form :form="form" >
        <a-modal title="创建新产品" centered v-model="modal2Visible" cancelText="取消" okText="确定"
                 @ok="createClientNode">

                <p>产品信息</p>
                <a-form-item :label-col="{ span: 6}" :wrapper-col="{ span: 16}" label="设备名称" >
                    <a-input  v-decorator="['clientname',{rules: [{ required: true, message: '请输入节点名称！' }],validateTrigger: 'blur'} ]"
                             placeholder="请输入节点名称！"/>
                </a-form-item>
                <p>节点类型</p>
                <a-form-item label="节点类型"  :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-select v-decorator="['tags', {rules: [{ required: true, message: '选择节点类型' }],validateTrigger: 'blur'}]"
                              placeholder="选择节点类型"  :style="{width:'316px'}">
                        <a-select-option :style="{position: 'absolute'}" value="终端">
                            终端
                        </a-select-option>
                        <a-select-option value="网关">
                            网关
                        </a-select-option>
                        <a-select-option value="路由">
                            路由
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <p>连网与数据</p>
                <a-form-item label="网络类型"  :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-select v-decorator="['networktype', {rules: [{ required: true, message: '选择网络类型' }],validateTrigger: 'blur'}]"
                              placeholder="选择网络类型" :style="{width:'316px'}">
                        <a-select-option :style="{position: 'absolute'}" value="WiFi">
                            WiFi
                        </a-select-option>
                        <a-select-option value="2G/3G/4G">
                            2G/3G/4G
                        </a-select-option>
                        <a-select-option value="以太网">
                            以太网
                        </a-select-option>
                        <a-select-option value="NB/Lora">
                            NB/Lora
                        </a-select-option>
                    </a-select>
                </a-form-item>

        </a-modal>
        </a-form>

    </div>

</template>

<script>
    import {createClient,getClient,deleteClient} from '@/api/mqtt' //getClient


    const columns = [{
        dataIndex: 'clientname',
        key: 'clientname',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' },
    }, {
        title: 'ClientId',
        dataIndex: 'clientid',
        key: 'clientid',
    }, {
        title: '添加时间',
        dataIndex: 'add_time',
        key: 'address',
    }, {
        title: '节点类型',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' },
    }, {
        title: '操作',
        key:'operation',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' },

    }];

    const data = [];

    export default {
        name: "addDevForm",
        data () {
            return {
                form: this.$form.createForm(this),
                modal2Visible: false,
                columns,
                data,
                clientStatus:true,
                visible: false,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px',
                },
                pStyle2: {
                    marginBottom: '24px',
                },
                name:this.$store.getters.name,




            }
        },
        filters: {

        },
        computed: {



        },
        created () {
           this.$store.dispatch('GetInfo')
            this.getClients();

        },mounted(){




        },

        methods: {
            deleteClient(){

            },

            getClients(){

                //console.log("4-挂载，实例被创建时执行")
               getClient().then((res)=>{
                   //    console.log(res.data)
                    sessionStorage.setItem('client',JSON.stringify(res.data))
                    this.data=res.data
                }).catch()
            },
            showDrawer(val) { //   console.log(val)

                sessionStorage.setItem('clientkey', val)
                this.$router.push({name:'Detail', params: {
                        id: val
                    }}).catch(err => {err})
            },
            onClose() {
                this.visible = false;
            },
            onSearch () {
                //console.log(value)
            },

            createDevice(){
                // 创建设备面板打开
                this.modal2Visible = true
            },
            createClientNode(){
                const { form: { validateFields },$notification } = this;
                validateFields({ force: true }, (err,values) => {
                    if (!err) {
                        //state.passwordLevelChecked = false;
                        //console.log(values)
                        const clientParams = { ...values }
                        clientParams.username=this.$store.getters.name

                        createClient(clientParams).then(()=> {

                            $notification['success']({
                                message: '提示',
                                description: '注册成功，返回设备列表界面',
                                duration: 8
                            })
                            this.getClients()
                        }).catch(err => {
                            $notification['error']({
                                message: '错误',
                                description: err,
                                duration: 5
                            })

                            //this.requestFailed(err)
                        })


                    }
                })

                this.modal2Visible = false;

               // console.log("11")


            },
            handleSelectChangeNodeType(value) {
                //console.log(value);
                this.node.nodeType=value

            },
            handleSelectChangeNetType(value) {
                //console.log(value);
                this.node.netType=value

            },
            onDelete (key) {
               console.log(key)
                deleteClient(key).then((res)=>{
                    console.log(res)
                    this.getClients()

                }).catch(()=>{})

            },
            requestFailed (err) {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                    duration: 4
                });
                this.registerBtn = false
            }



        }
    }
</script>

<style scoped>
    .content{
        margin-top: 20px;

    }
    .contentone .ant-btn{
        margin: 0 10px;

    }
    .ant-tabs{
        margin-top: -82px;
        float: left;

    }
    .devicemanage{
        font-size: 24px;
        color:  #ff7744;
        float: left;
        margin-left: -100px;
        margin-right: 50px;
    }
</style>
